<template>
  <div :id="id" class="titlet-content" :style="'padding-top:' +propsPaddingTop+ 'px;padding-Bottom:' + propsPaddingBottom+'px'">
    <div class="titles clearfix">
      <span class="fl" :style="'color:' + color">
        {{ title }}
        <slot name="tit" />
      </span>
      <span class="fr">
        <slot />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Titles',
  props: {
    title: {
      type: String,
      default: ''
    },
    propsPaddingTop: {
      type: Number,
      default: 32
    },
    propsPaddingBottom: {
      type: Number,
      default: 32
    },
    color: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: 321
    }
  },
  mounted() {
    this.id = this.$router.currentRoute.path
  },
  methods: {}
}
</script>
<style scoped>
.titlet-content {
  padding-bottom: 24px;
}
.titlet-content .titles {
  font-size: 20px;
  color: #2D3339;
  font-weight: bold;
}
</style>
